<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Simple SlippyMap using Google Maps v3 API</title>
        <style>
            /* Style inspired by http://osm.lonvia.de/world_hiking.html */
            html, body, .slippymap {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
            .slippymap {
                width: 99.5%;
                height: 99.5%;
                outline: 1px solid gray;
            }
            header, footer{
                position: fixed;
                left: 0;
                right: 0;
                width: 100%
                margin: 0;
                padding: 0.21em;
                z-index: 2;
                background: #eed;
            }
            h1 {
                font-size: 1.5em;
                font-weight: bold;
                margin: 0;
            }
            header {
                border-bottom: 2px solid #531;
                top: 0;
            }
            footer {
                border-top: 2px solid #531;
                bottom: 0;
            }
        </style> 
    </head>
    <body>
        <header>
            
        </header>
        <div id="map" class="slippymap" style="float: left;"></div>
       
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var element = document.getElementById("map");
 
            var map = new google.maps.Map(element, {
                center: new google.maps.LatLng(57, 21),
                zoom: 3,
                mapTypeId: "OSM",
                mapTypeControlOptions: {
                    mapTypeIds: ["OSM"]
                }
            });
 
            map.mapTypes.set("OSM", new google.maps.ImageMapType({
                getTileUrl: function(coord, zoom) {
                    return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                maxZoom: 18
            }));
        </script>
    </body>
</html>